<template>
  <div class="app-page">
    <tab-bar :tab-list="realTabList" :active="active" :type="type" @change="changeTab" />
    <template>
      <securityOrderManage v-if="active==='securityOrderManage'" />
    </template>
    <template>
      <securityTaskOrder v-if="active==='securityTaskOrder'" />
    </template>
    <template>
      <noCheckReason v-if="active==='noCheckReason'" />
    </template>
    <template>
      <riskTrack v-if="active==='riskTrack'" />
    </template>
    <template>
      <inspection v-if="active==='inspection'" />
    </template>
  </div>
</template>
<script>
  import tabBar from '@/components/Tabs'
  import securityOrderManage from '../securityOrderManage/index.vue'
  import securityTaskOrder from '../securityTaskOrder'
  import noCheckReason from '../noCheckReason'
  import inspection from '../re-inspection/components/inspection.vue'
  import riskTrack from '../riskTrack'
  export default {
    name: 'securityManage',
    components: {
      tabBar,
      securityOrderManage,
      securityTaskOrder,
      noCheckReason,
      inspection,
      riskTrack
    },
    data() {
      return {
        type: 'card',
        active: 'securityOrderManage',
        tabList: [
          { label: '安检单管理', value: 'securityOrderManage', menuId: 60101 },
          { label: '定期安检任务单', value: 'securityTaskOrder', menuId: 60102 },
          { label: '未执行安检', value: 'noCheckReason', menuId: 60103 },
          { label: '隐患追踪', value: 'riskTrack', menuId: 60104 },
          { label: '复检单', value: 'inspection', menuId: 60105 }
        ],
        corpList: []
      }
    },
    computed: {
      realTabList() {
        return this.tabList.filter(item => this.$hasTabPermission(item.menuId))
      }
    },
    created() {
      this.active = this.realTabList.length ? this.realTabList[0].value : ''
    },
    methods: {
      changeTab(val) {
        this.active = val
      }
    }

  }
</script>

